<template>
  <div class="universe-stats">
    <div class="stat-card">
      <div class="stat-icon">🔄</div>
      <div class="stat-title">反转次数</div>
      <div class="stat-value">{{ reversalCount }}</div>
    </div>
    <div class="stat-card">
      <div class="stat-icon">⚡</div>
      <div class="stat-title">平均可信度</div>
      <div class="stat-value">{{ averageCredibility }}%</div>
    </div>
    <div class="stat-card">
      <div class="stat-icon">🏆</div>
      <div class="stat-title">最佳反转</div>
      <div class="stat-value">{{ bestReversal }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    reversalCount: {
      type: Number,
      default: 0
    },
    averageCredibility: {
      type: Number,
      default: 0
    },
    bestReversal: {
      type: String,
      default: '暂无'
    }
  }
}
</script>

<style scoped>
.universe-stats {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
  gap: 15px;
}

.stat-card {
  flex: 1;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.stat-icon {
  font-size: 2em;
  margin-bottom: 5px;
}

.stat-title {
  font-size: 0.9em;
  color: #757575;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 1.2em;
  font-weight: bold;
  color: var(--primary-color);
}
</style>